<script lang="ts" setup>
import { useToastStore } from "@/store";
import NavBar from "./navbar.vue";
import { useToast } from "wot-design-uni";

const toast = useToast();

const { register } = useToastStore();

const props = defineProps<{
	title?: object;
	innerClass?: string;
}>();

onLoad(() => {
	register(toast);
});
</script>

<template>
	<NavBar :config="props.title">
		<template #right>
			<slot name="titleRight"></slot>
		</template>
	</NavBar>
	<wd-config-provider :theme="'light'">
		<view :class="`view-container ${props.innerClass}`">
			<slot />
		</view>
		<wd-toast custom-class="test" />
		<wd-message-box />
		<wd-notify />
	</wd-config-provider>
</template>

<style lang="less">
.view-container {
	padding: 30px 20px;
}

:deep(.test) {
	line-height: 55px !important;

	.wd-toast__msg {
		font-size: 36px !important;

		line-height: 55px !important;
	}
}
</style>
